<html>
<head>
	<title>Check It Later Tab Options</title>
	<link rel="stylesheet" href="../jquery-ui/jquery-ui.css" type="text/css" media="screen" />
	<link rel="stylesheet" href="../css/list.css" type="text/css" media="screen" />
	<link rel="stylesheet" href="../css/themes/default.css" type="text/css" media="screen" class="theme" />
	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.min.js"></script>	
	<script type="text/javascript" src="../js/vars.js"></script>
	<script type="text/javascript" src="../js/list.js"></script>
	<script type="text/javascript" src="../js/options.js"></script>
</head>
<body class="optionsPage">
	<div id="container">
		<div id="header">
			<h1>Check It Later Tab Options</h1>
		</div>

		<div id="status"></div>

		<div id="content" class="options">
			<h2>Account Credentials</h2>

			<label>Username:</label><input type="text" id="username" /><br />
			<label>Password:</label><input type="password" id="password" />

			<h2>Page Options</h2>
			
			<div>
				<label>Links Per Page:</label><input type="text" id="pagecount" style="width:40px" maxlength="3" />
			</div>
			
			<div>
				<label>Open Links in New Tab?</label><select id="opennewtab"><option>Yes</option><option selected="selected">No</option></select>
			</div>
			
			<div>
				<label>Theme</label><select id="themes">
					<option value="default" selected="selected">Original</option>
					<option value="new">New &amp; Improved</option>
				</select>
			</div>

			<div>
				<label>Mark Read Animation</label><select id="readAnimation">
					<option selected="selected">Enabled</option><option>Disabled</option></select>
				</select>
			</div>
			
			<div>
				<label>Auto Suggest Tags</label>
				<select id="autoSuggest">
					<option>Yes</option><option selected="selected">No</option></select>
				</select>
			</div>
		</div>
		
			<div style="clear:both;"></div>			

			<button onclick="save()"><span>Save Options</span></button>
	</div>
			
	<div id="help-newlink" style="display:none;" title="Add New Link Feature">
		<p>
			Activating this feature will cause a notification to appear on the list page when the Check It Later icon is clicked, but only if the page you were viewing isn't already in your Read It Later list.
		</p>
		
		<img style="border: dashed 1px #ccc;" src="../images/notify.png" alt="Notification Screenshot" />
		<span style="color: #aaa; font-style: italic">Example Notification Message</span>
		
		<p>
			Simply click <strong>Add Link to Read It Later List</strong> to store the link for later viewing.  This allows you to use Check It Later for adding links in addition to the filtering and management features that already exist.
		</p>
	</div>
	
	<div id="help-badge" style="display: none;" title="Show Badge">
		<p>
			This feature shows a small badge <img src="../images/badge.png" alt="Badge Icon" /> when unread links exist within your list.  This may help to remind you that there are unread items that you may wish to read soon. This feature is disabled by default.
		</p>
	</div>
		
</body>
</html>